<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>⚡ 国网慧电管家</title>
    <style>
        :root {
            --sgcc-red: #C91F37;    /* 国网红 */
            --sgcc-blue: #0052CC;   /* 国网蓝 */
            --light-gray: #F5F7FA;  /* 浅灰背景 */
            --dark-text: #1D2129;   /* 深色文字 */
            --light-text: #6E7681;  /* 浅色文字 */
            --border-radius: 8px;   /* 圆角 */
            --shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        body {
            background-color: var(--light-gray);
            color: var(--dark-text);
            line-height: 1.6;
        }

        /* 头部导航 */
        header {
            background-color: var(--sgcc-red);
            color: white;
            padding: 1rem 0;
            box-shadow: var(--shadow);
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .logo-icon {
            font-size: 1.8rem;
        }

        /* 主内容区 */
        .main-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .intro {
            text-align: center;
            margin-bottom: 2rem;
        }

        .intro h2 {
            color: var(--sgcc-red);
            margin-bottom: 0.5rem;
        }

        .intro p {
            color: var(--light-text);
            max-width: 800px;
            margin: 0 auto;
        }

        /* 功能卡片区 */
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 1rem;
            color: var(--sgcc-blue);
        }

        .card-icon {
            font-size: 1.5rem;
        }

        .card h3 {
            font-size: 1.2rem;
            font-weight: 600;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 1rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark-text);
        }

        input, select, textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #DCDFE6;
            border-radius: var(--border-radius);
            font-size: 1rem;
            color: var(--dark-text);
        }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--sgcc-blue);
            box-shadow: 0 0 0 2px rgba(0,82,204,0.1);
        }

        .btn {
            width: 100%;
            padding: 0.8rem;
            background-color: var(--sgcc-red);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #B01930; /* 深一点的红色 */
        }

        /* 结果区样式 */
        .result-area {
            margin-top: 1.5rem;
            padding: 1rem;
            background-color: var(--light-gray);
            border-radius: var(--border-radius);
            border-left: 4px solid var(--sgcc-blue);
            display: none;
        }

        .result-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--sgcc-red);
        }

        .result-content {
            white-space: pre-wrap;
            line-height: 1.8;
            color: var(--dark-text);
        }

        /* 加载动画 */
        .loading {
            display: none;
            text-align: center;
            margin-top: 1rem;
            padding: 1rem;
        }

        .spinner {
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(0,82,204,0.2);
            border-radius: 50%;
            border-top-color: var(--sgcc-blue);
            animation: spin 1s linear infinite;
            margin-right: 0.5rem;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 错误提示 */
        .error {
            margin-top: 1rem;
            padding: 1rem;
            background-color: #FFF2F0;
            color: #F5222D;
            border-radius: var(--border-radius);
            display: none;
        }

        /* 页脚 */
        footer {
            text-align: center;
            padding: 1.5rem 0;
            margin-top: 2rem;
            color: var(--light-text);
            border-top: 1px solid #E5E6EB;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .card-container {
                grid-template-columns: 1fr;
            }

            .header-container {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
    </style>
    <!-- 引入图标库（用于功能图标） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iconfont@4.7.0/iconfont.css">
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="header-container">
            <div class="logo">
                <span class="iconfont iconfont-electricity logo-icon">&#xe60a;</span>
                <span>国网慧电管家</span>
            </div>
            <div class="contact">
                国网服务热线：95598
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div class="main-container">
        <div class="intro">
            <h2>居民用电智能服务平台</h2>
            <p>基于文心一言4.5，为您提供用电咨询、故障排查、电费分析、节能建议一站式服务</p>
        </div>

        <!-- 功能卡片1：用电咨询 -->
        <div class="card-container">
            <div class="card">
                <div class="card-header">
                    <span class="iconfont iconfont-consult card-icon">&#xe60c;</span>
                    <h3>用电咨询</h3>
                </div>
                <p>解答电费查询、电价标准、业务办理等常见问题</p>
                <div class="form-group">
                    <label for="consult-question">您的问题</label>
                    <textarea id="consult-question" rows="3" placeholder="例如：怎么查询上个月的电费？居民电价是多少？"></textarea>
                </div>
                <button class="btn" id="consult-btn">获取解答</button>
                <div class="loading" id="consult-loading">
                    <span class="spinner"></span>
                    <span>正在生成解答...</span>
                </div>
                <div class="error" id="consult-error"></div>
                <div class="result-area" id="consult-result">
                    <div class="result-title">解答结果</div>
                    <div class="result-content" id="consult-content"></div>
                </div>
            </div>

            <!-- 功能卡片2：故障指引 -->
            <div class="card">
                <div class="card-header">
                    <span class="iconfont iconfont-fault card-icon">&#xe60d;</span>
                    <h3>故障报修指引</h3>
                </div>
                <p>描述故障现象，获取分步排查方案</p>
                <div class="form-group">
                    <label for="fault-desc">故障描述</label>
                    <textarea id="fault-desc" rows="2" placeholder="例如：家里突然没电，灯不亮，插座没反应"></textarea>
                </div>
                <div class="form-group" style="display: flex; gap: 1rem;">
                    <div style="flex: 1;">
                        <label for="fault-power">总闸是否跳闸</label>
                        <select id="fault-power">
                            <option value="未知">未知</option>
                            <option value="跳闸">跳闸</option>
                            <option value="未跳闸">未跳闸</option>
                        </select>
                    </div>
                    <div style="flex: 1;">
                        <label for="fault-neighbor">邻居是否有电</label>
                        <select id="fault-neighbor">
                            <option value="未知">未知</option>
                            <option value="有">有</option>
                            <option value="没有">没有</option>
                        </select>
                    </div>
                </div>
                <button class="btn" id="fault-btn">生成排查指南</button>
                <div class="loading" id="fault-loading">
                    <span class="spinner"></span>
                    <span>正在分析故障...</span>
                </div>
                <div class="error" id="fault-error"></div>
                <div class="result-area" id="fault-result">
                    <div class="result-title">排查结果</div>
                    <div class="result-content" id="fault-content"></div>
                </div>
            </div>

            <!-- 功能卡片3：电费分析 -->
            <div class="card">
                <div class="card-header">
                    <span class="iconfont iconfont-analysis card-icon">&#xe60e;</span>
                    <h3>电费分析</h3>
                </div>
                <p>输入用电信息，获取用量对比及降费建议（模拟数据）</p>
                <div class="form-group" style="display: flex; gap: 1rem;">
                    <div style="flex: 1;">
                        <label for="analysis-no">户号（模拟）</label>
                        <input type="text" id="analysis-no" placeholder="例如：1001234567">
                    </div>
                    <div style="flex: 1;">
                        <label for="analysis-month">分析月份</label>
                        <input type="text" id="analysis-month" placeholder="例如：2024年8月">
                    </div>
                </div>
                <div class="form-group" style="display: flex; gap: 1rem;">
                    <div style="flex: 1;">
                        <label for="analysis-size">家庭人数</label>
                        <input type="number" id="analysis-size" value="3" min="1">
                    </div>
                    <div style="flex: 1;">
                        <label for="analysis-devices">高耗电设备</label>
                        <input type="text" id="analysis-devices" placeholder="例如：2台空调">
                    </div>
                </div>
                <button class="btn" id="analysis-btn">生成分析报告</button>
                <div class="loading" id="analysis-loading">
                    <span class="spinner"></span>
                    <span>正在分析电费...</span>
                </div>
                <div class="error" id="analysis-error"></div>
                <div class="result-area" id="analysis-result">
                    <div class="result-title">分析结果</div>
                    <div class="result-content" id="analysis-content"></div>
                </div>
            </div>

            <!-- 功能卡片4：节能建议 -->
            <div class="card">
                <div class="card-header">
                    <span class="iconfont iconfont-energy card-icon">&#xe60f;</span>
                    <h3>节能建议</h3>
                </div>
                <p>输入家庭情况，获取定制化节能方案</p>
                <div class="form-group">
                    <label for="energy-type">户型</label>
                    <select id="energy-type">
                        <option value="一居室">一居室</option>
                        <option value="两居室" selected>两居室</option>
                        <option value="三居室">三居室</option>
                        <option value="四居室及以上">四居室及以上</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="energy-habit">用电习惯</label>
                    <textarea id="energy-habit" rows="2" placeholder="例如：长期开空调、晚上10点后用电多"></textarea>
                </div>
                <div class="form-group">
                    <label for="energy-renewable">是否有可再生能源设备</label>
                    <select id="energy-renewable">
                        <option value="无" selected>无</option>
                        <option value="光伏板">光伏板</option>
                        <option value="太阳能热水器">太阳能热水器</option>
                    </select>
                </div>
                <button class="btn" id="energy-btn">生成节能方案</button>
                <div class="loading" id="energy-loading">
                    <span class="spinner"></span>
                    <span>正在生成节能建议...</span>
                </div>
                <div class="error" id="energy-error"></div>
                <div class="result-area" id="energy-result">
                    <div class="result-title">节能方案</div>
                    <div class="result-content" id="energy-content"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>© 2024 中国国家电网 · 慧电管家 | 提示：AI建议仅供参考，具体以国网官方政策为准</p>
    </footer>

    <!-- 交互脚本 -->
    <script>
        // 通用请求函数
        async function sendRequest(url, data, btnId, loadingId, errorId, resultId, contentId) {
            const btn = document.getElementById(btnId);
            const loading = document.getElementById(loadingId);
            const error = document.getElementById(errorId);
            const result = document.getElementById(resultId);
            const content = document.getElementById(contentId);

            // 状态初始化
            btn.disabled = true;
            btn.textContent = "处理中...";
            loading.style.display = "inline-flex";
            error.style.display = "none";
            result.style.display = "none";

            try {
                // 发送请求
                const response = await fetch(url, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(data)
                });

                const resData = await response.json();
                if (!response.ok) throw new Error(resData.error || "服务异常");

                // 显示结果
                content.textContent = resData.result;
                result.style.display = "block";
            } catch (err) {
                // 显示错误
                error.textContent = `❌ ${err.message}`;
                error.style.display = "block";
            } finally {
                // 恢复状态
                btn.disabled = false;
                btn.textContent = btnId.includes("consult") ? "获取解答" : 
                                 btnId.includes("fault") ? "生成排查指南" :
                                 btnId.includes("analysis") ? "生成分析报告" : "生成节能方案";
                loading.style.display = "none";
            }
        }

        // 用电咨询绑定
        document.getElementById("consult-btn").addEventListener("click", () => {
            const question = document.getElementById("consult-question").value.trim();
            if (!question) {
                alert("请输入您的用电问题！");
                return;
            }
            sendRequest(
                "/api/consult",
                { question },
                "consult-btn",
                "consult-loading",
                "consult-error",
                "consult-result",
                "consult-content"
            );
        });

        // 故障指引绑定
        document.getElementById("fault-btn").addEventListener("click", () => {
            const faultDesc = document.getElementById("fault-desc").value.trim();
            if (!faultDesc) {
                alert("请描述您的故障现象！");
                return;
            }
            const hasPower = document.getElementById("fault-power").value;
            const isNeighborOk = document.getElementById("fault-neighbor").value;
            sendRequest(
                "/api/fault",
                { fault_desc: faultDesc, has_power: hasPower, is_neighbor_ok: isNeighborOk },
                "fault-btn",
                "fault-loading",
                "fault-error",
                "fault-result",
                "fault-content"
            );
        });

        // 电费分析绑定
        document.getElementById("analysis-btn").addEventListener("click", () => {
            const householdNo = document.getElementById("analysis-no").value.trim();
            const month = document.getElementById("analysis-month").value.trim();
            const familySize = parseInt(document.getElementById("analysis-size").value);
            if (!householdNo || !month || isNaN(familySize)) {
                alert("请完善户号、月份、家庭人数信息！");
                return;
            }
            const highPowerDevices = document.getElementById("analysis-devices").value.trim();
            sendRequest(
                "/api/analysis",
                { household_no: householdNo, month, family_size: familySize, high_power_devices: highPowerDevices },
                "analysis-btn",
                "analysis-loading",
                "analysis-error",
                "analysis-result",
                "analysis-content"
            );
        });

        // 节能建议绑定
        document.getElementById("energy-btn").addEventListener("click", () => {
            const houseType = document.getElementById("energy-type").value;
            const usageHabit = document.getElementById("energy-habit").value.trim();
            const hasRenewable = document.getElementById("energy-renewable").value;
            sendRequest(
                "/api/energy",
                { house_type: houseType, usage_habit: usageHabit, has_renewable: hasRenewable },
                "energy-btn",
                "energy-loading",
                "energy-error",
                "energy-result",
                "energy-content"
            );
        });
    </script>
</body>
</html>